<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>


<div id="app">

   <tree :tree="tree"></tree>

</div>

</body>
<script src="../../../vender/vue@2.4.2.js"></script>
<script>

    var app=new Vue({
        el:'#app',
        components:{
            tree:{
                name:'tree',
                template:`<dl>
                    <dt>{{tree.name}}</dt>
                    <dd v-for="child of tree.children" v-if="child.children">
                        <tree :tree="child"></tree>
                    </dd>
                    <dd v-else>
                        {{child.name}}
                    </dd>
                </dl>`,
                props:['tree']
            }
        },
        data:{
            tree:{
                name:'root',
                children:[
                    {name:'index.html'},
                    {
                        name:'js',
                        children:[
                            {name:'vue.js'},
                            {name:'jquery.js'},
                        ]
                    },
                    {name:'css'}
                ]
            }
        }
    });

</script>
</html>